{% extends '_layout/base.html' %}
{% load i18n %}
{% load static %}

{% block pageTitle %}
  {% if action == 'modify' %}
    {% trans 'Modify Data' %}
  {% else %}
    {% trans 'Commit Data' %}
  {% endif %}
{% endblock %}

{% block pageHeadExtra %}
  <link href="https://cdn.bootcss.com/jquery.perfect-scrollbar/0.8.1/css/perfect-scrollbar.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/jquery.perfect-scrollbar/0.8.1/js/perfect-scrollbar.jquery.min.js"></script>
  <link href="{% static 'css/modal-dialog.css' %}" rel="stylesheet">
{% endblock %}

{% block pageBody %}
  {% include 'basic/header.html' %}

  <div class="page container">
    <h1>
      {% if action == 'modify' %}
        {% trans 'Modify Data' %}
      {% else %}
        {% trans 'Commit Data' %}
      {% endif %}
    </h1>

    <div class="row bs-wizard">
      <div id="d-step1" class="col-xs-3 bs-wizard-step active">
        <div class="text-center bs-wizard-stepnum">{% trans 'Step 1' %}</div>
        <div class="progress">
          <div class="progress-bar"></div>
        </div>
        <a class="bs-wizard-dot"></a>
        <div class="bs-wizard-info text-center">
          {% trans 'Choose a material class your target template belongs to' %}
        </div>
      </div>

      <div id="d-step2" class="col-xs-3 bs-wizard-step disabled">
        <div class="text-center bs-wizard-stepnum">{% trans 'Step 2' %}</div>
        <div class="progress">
          <div class="progress-bar"></div>
        </div>
        <a class="bs-wizard-dot"></a>
        <div class="bs-wizard-info text-center">
          {% trans 'Choose a template you want commit data to' %}
        </div>
      </div>

      <div id="d-step3" class="col-xs-3 bs-wizard-step disabled">
        <div class="text-center bs-wizard-stepnum">{% trans 'Step 3' %}</div>
        <div class="progress">
          <div class="progress-bar"></div>
        </div>
        <a class="bs-wizard-dot"></a>
        <div class="bs-wizard-info text-center">
          {% trans 'Choose a way(By form or by file) you like' %}
        </div>
      </div>

      <div id="d-step4" class="col-xs-3 bs-wizard-step disabled">
        <div class="text-center bs-wizard-stepnum">{% trans 'Step 4' %}</div>
        <div class="progress">
          <div class="progress-bar"></div>
        </div>
        <a class="bs-wizard-dot"></a>
        <div class="bs-wizard-info text-center">
          {% trans 'Fill your data form or file generated and then, commit it' %}
        </div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-body">
        <h2>{% trans 'Select class and template' %}</h2>

        <form>
          <div class="row">
            <div class="col-lg-6 col-md-6">
              <div class="form-group required">
                <label for="m-category">{% trans 'Material Class' %}</label>
                <select class="form-control" id="m-category" name="m-category" required>
                  <option value="null">----- {% trans 'Pleasby-file-hinte select material category' %} -----</option>
                </select>
              </div>
            </div>
            <div class="col-lg-6 col-md-6">
              <div class="form-group required">
                <label for="d-template">{% trans 'Template' %}</label>
                <select class="form-control" id="d-template" name="d-template" required>
                  <option value="null">----- {% trans 'Please select template' %} -----</option>
                </select>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-body">
        <h2>{% trans 'Fill your data and commit it' %}</h2>

        <ul class="nav nav-pills nav-justified">
          <li class="active">
            <a href="#by-form" data-toggle="tab">
              <i class="fa fa-building"></i>
              {% trans 'By Form' %}
            </a>
          </li>
          <li>
            <a href="#by-file" data-toggle="tab">
              <i class="fa fa-file-text"></i>
              {% trans 'By File' %}
            </a>
          </li>
        </ul>

        <div class="dividing"></div>

        <div class="tab-content clearfix">
          <div id="by-form" class="tab-pane active">
            <form>
              {% if action == 'modify' %}
              <input type="hidden" id="d-id" value="{{ did }}">
              {% endif %}
              <div class="form-group required">
                <label for="d-title">{% trans 'Title' %}</label>
                <input class="form-control" id="d-title" name="d-title"
                       placeholder="{% trans 'Data title(required)' %}"
                       data-vf="true" data-vf-regex="^$|\\s+" data-vf-inverse="true"
                       data-vf-help="{% trans 'This field cannot be null' %}" required>
              </div>
              <p class="text-center">
                <a class="btn btn-default" data-toggle="collapse" href="#collapseExtra" aria-expanded="false"
                   aria-controls="collapseExtra">
                  <i class="fa fa-expand"></i>
                  {% trans 'Toggle Extra Information' %}
                  <i class="fa fa-compress"></i>
                </a>
              </p>
              <div class="collapse in" id="collapseExtra">
                <div class="row">
                  <div class="col-lg-6 col-md-6">
                    <div class="form-group">
                      <label for="d-doi">DOI</label>
                      <input class="form-control" id="d-doi" name="d-doi" placeholder="{% trans 'DOI of data' %}"
                             type="url">
                    </div>
                  </div>
                  <div class="col-lg-6 col-md-6">
                    <div class="form-group">
                      <label for="d-keywords">{% trans 'Keywords' %}</label>
                      <input class="form-control" id="d-keywords" name="d-keywords"
                             placeholder="{% trans 'Keywords of data(Separated by commas)' %}">
                    </div>
                  </div>
                </div>

                <div class="row">
                  <div class="col-lg-6 col-md-6">
                    <div class="form-group">
                      <label for="d-purpose">{% trans 'Purpose' %}</label>
                      <input class="form-control" id="d-purpose" name="d-purpose"
                             placeholder="{% trans 'Purpose(Usage) of this data' %}">
                    </div>
                  </div>
                  <div class="col-lg-6 col-md-6">
                    <div class="form-group">
                      <label for="d-abstract">{% trans 'Abstract' %}</label>
                      <input class="form-control" id="d-abstract" name="d-abstract"
                             placeholder="{% trans 'Abstract of this data' %}">
                    </div>
                  </div>
                </div>

                <div class="row">
                  <div class="col-lg-3 col-md-3">
                    <div class="form-group">
                      <label for="d-o-source">{% trans 'Source' %}</label>
                      <input class="form-control" id="d-o-source" name="d-o-source"
                             placeholder="{% trans 'Source of data' %}">
                    </div>
                  </div>
                  <div class="col-lg-3 col-md-3">
                    <div class="form-group">
                      <label for="d-o-reference">{% trans 'Reference' %}</label>
                      <input class="form-control" id="d-o-reference" name="d-o-reference"
                             placeholder="{% trans 'Reference of data' %}">
                    </div>
                  </div>
                  <div class="col-lg-3 col-md-3">
                    <div class="form-group">
                      <label for="d-o-project">{% trans 'Project' %}</label>
                      <input class="form-control" id="d-o-project" name="d-o-project"
                             placeholder="{% trans 'Project support data' %}">
                    </div>
                  </div>
                  <div class="col-lg-3 col-md-3">
                    <label for="d-o-others">{% trans 'Others' %}</label>
                    <input class="form-control" id="d-o-others" name="d-o-others"
                           placeholder="{% trans 'Other details of this data' %}">
                  </div>
                </div>

              </div>
            </form>
            <p class="text-right">
              <i class="fa fa-angle-double-right"></i>
              <button id="btn-gen-form" class="btn btn-lg btn-primary" disabled>{% trans 'Generate form' %}</button>
            </p>
            <form id="form-container"></form>
          </div>
          <div id="by-file" class="tab-pane">
            <form>
              <h3>{% trans 'Select a file type' %}</h3>
              <div class="row">
                <div class="col-lg-4 col-md-4">
                  <button id="gen-xlsx" class="btn btn-lg btn-default center-block" type="button">
                    <i class="fa fa-file-excel-o"></i>
                    {% trans 'Generate EXCEL' %}
                  </button>
                </div>
                <div class="col-lg-4 col-md-4">
                  <button id="gen-json" class="btn btn-lg btn-default center-block" type="button">
                    <i class="fa fa-file-text-o"></i>
                    {% trans 'Generate JSON' %}
                  </button>
                </div>
                <div class="col-lg-4 col-md-4">
                  <button id="gen-xml" class="btn btn-lg btn-default center-block" type="button">
                    <i class="fa fa-file-code-o"></i>
                    {% trans 'Generate XML' %}
                  </button>
                </div>
              </div>
              <h3>{% trans 'Upload your file' %}</h3>
              <div class="row">
                <div class="col-lg-6 col-sm-6">
                  <div class="input-group">
                    <input id="true-file" type="file" style="display: none;" onchange="Utils.afterChooseFile(this)"
                           accept=".xlsx, .json, .xml, .zip, .rar, .7z, .tar, .gz, .bz2, .xz">
                    <input class="form-control" placeholder="{% trans 'Choose your data file then upload it' %}"
                           disabled>
                    <div class="input-group-btn">
                      <button class="btn btn-primary" type="button" onclick="Utils.chooseFile(this)">
                        {% trans 'Choose File' %}
                        <i class="fa fa-mouse-pointer" aria-hidden="true"></i>
                      </button>
                    </div>
                  </div>
                </div>
                <div class="col-lg-6 col-sm-6">
                  <button id="upload-file" class="btn btn-primary" type="button">
                    {% trans 'Upload' %}
                    <i class="fa fa-upload"></i>
                  </button>
                </div>
              </div>

              <div class="dividing"></div>
              <div class="alert alert-info alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
                <span id="by-file-hint">
                  <a class="alert-link">{% trans 'Note: ' %}</a>
                  {% trans 'Follow steps above, and after you click "Generate" button, template file will show below.(except excel)' %}
                </span>
                <span id="by-file-hint-success" class="hidden">
                  <strong>{% trans 'Well done!' %}</strong>
                  {% trans 'Template file successfully generated.' %}
                  {% trans 'You can' %}
                  <a id="by-file-success-link" class="alert-link" target="_blank"
                     title="{% trans 'Download' %}">{% trans 'Click here' %}</a>
                  {% trans 'to download it, then, upload this file after you fill your data.' %}
                </span>
              </div>
              <textarea id="t-file-content" class="form-control" rows="20" contenteditable></textarea>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  {% include 'basic/footer.html' %}
{#  {% include '_component/corner-buttons.html' %}#}
{#  {% include '_component/fast-feedback.html' %}#}
{#  {% include '_component/shopping-cart.html' %}#}
{#  {% include '_component/modal-dialog-overlay.html' %}#}
{% endblock %}

{% block pageFootExtra %}
  <script src="{% static 'js/storage/storage.js' %}"></script>
  <script src="{% static 'js/storage/add_data.js' %}"></script>
  <link href="{% static 'css/storage/data.css' %}" rel="stylesheet">
{% endblock %}
